<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>修改手机号</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		body {
			background-color: #fff;
		}

		.aui-bar-nav .aui-pull-left {
			padding: 0 0.25rem;
		}

		.aui-list {
			padding: 0 0.5rem;
		}

		.aui-title {
			font-weight: bolder;
		}

		.aui-list-item- {
			height: 2.5rem;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			position: relative;
		}

		.aui-list-item-label- img {
			width: 1rem;
		}

		.aui-btn-block {
			display: inline-block;
			margin-left: 50%;
			transform: translateX(-50%);
			/*width: 85%;*/
			width: 16.25rem;
			/*height: 2.2rem;*/
			height: 2.25rem;
			line-height: 2.25rem;
			color: #FFFFFF;
			/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
			/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
			/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
			background: linear-gradient(135deg, rgba(132, 229, 255, .29) 0%, rgba(107, 180, 255, .29) 100%, rgba(122, 174, 229, .29) 100%);
			/*border-radius: 2rem;*/
			border-radius: 1.25rem;
			text-align: center;
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
		}

		.aui-bg-linear {
			/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
			/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
			/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			/*border-radius:2.5rem;*/
		}

		.aui-btn {
			border-radius: 0.25rem;
		}

		::placeholder {
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(187, 187, 187, 1);
		}

		.codes {
			color: rgba(114, 213, 239, .5) !important;
		}
		/*改写*/

		.phone_code_wraper {
			padding: 0 1.25rem;
		}

		.phone_code_wraper>div {
			height: 2.75rem;
			border-bottom: 1px solid rgba(238, 238, 238, 0.5);
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.code {
			font-size: 0.75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(114, 213, 239, 1);
			opacity: 0.3;
		}

		.active_code {
			font-size: 0.75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(114, 213, 239, 1);
		}

		.login_btn_new {
			width:16.25rem;
			height: 2.25rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			opacity: 0.29;
			font-size: 0.75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 2.25rem;
			margin: 0 auto;
			margin-top: 2rem;
			border-radius: 1.55rem;
			text-align: center;
			border: none;
		}
		.btn_active_bg{
			opacity: 1;
		}
	</style>
</head>

<body>
	<div id="aui-header" class="ming-bg-blue">
		<header class="aui-bar aui-bar-nav ming-bg-blue" style="position:relative;margin-bottom:2.5rem;">
			<a class="aui-pull-left" tapmode onclick="close_win()" style="margin-left:1.3rem;margin-bottom:2rem;">
				<img class="btn-img-back" src="../../image/btn/btn-close-dark.png" />
			</a><br>
			<div class="aui-info aui-padded-t-0 aui-padded-b-10" style="font-size:1.4rem;margin-top:1.5rem;margin-left:1.5rem;font-size:1.4rem;font-family:PingFangSC-Medium;font-weight:500;color:rgba(34,34,34,1);position:relative;z-index:1000;">
				手机验证码登录
			</div>
			<!-- 登陆/注册 底部透明蓝 -->
			<span style="display:inline-block;width:9.9rem;height:0.5rem;background:linear-gradient(135deg,rgba(132,229,255,.5) 0%,rgba(107,180,255,.5) 100%,rgba(122,174,229,.5) 100%);position:absolute;left:1.5rem;bottom:0.9rem;border-radius:.1rem;"></span>
		</header>

		<!-- 下方手机号 f验证码 -->
		<div id="app" class="phone_code_wraper">
			<div class="">
				<input v-model="mobile" type="tel" maxlength="11" placeholder="请输入手机号" class="" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);" />
			</div>
			<div class="">
				<input v-model="sms_code" type="tel" maxlength="6" placeholder="请输入验证码" class="" style="width:70%;font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);" />
				<div class="" tapmode onclick="getCode()" v-if="mobile.length == 11">
					<span class="active_code">{{sms_time}}</span>
				</div>

				<div class="" v-else>
					<span class="code">{{sms_time}}</span>
				</div>
			</div>
			<!-- 底部按钮 -->
			<button class="login_btn_new btn_active_bg" tapmode onclick="updateMobile()" v-if="mobile != '' && sms_code.length >= 6">
				登录
			</button>
			<button class="login_btn_new" v-else>
				登录
			</button>

		</div>



	</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/verify.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			mobile: '',
			sms_code: '',
			sms_time: '获取验证码',
		},
	})
	apiready = function() {
		$api.fixStatusBar($api.byId('aui-header'))
		api.setStatusBarStyle({
			style: 'dark'
		});
	};

	function getCode() {
		if (!isPoneAvailable(vm.mobile)) {
			toast('请输入正确的手机号')
			return;
		}
		if (vm.sended) {
			return;
		}
		get_data('api/Sms/sendAuthCode', {
			mobile: vm.mobile,
		}, function(ret) {
			//alert(JSON.stringify(ret))
			//从服务器请求验证码并返回结果，如果已发送操作如下：
			vm.sended = 1;
			var timer = 60;
			vm.sms_time = timer + 's'
			var ti = setInterval(function() {
				timer = timer - 1;
				vm.sms_time = timer + 's';
				if (timer < 0) {
					vm.sended = 0;
					vm.sms_time = '获取验证码';
					clearInterval(ti);
				}
			}, 1000);
			toast(ret.msg)
		})
	}

	function updateMobile() {
		if (vm.sms_code == '' || vm.mobile == '') {
			return;
		}
		if (vm.sms_code.length != 6) {
			toast('验证码错误');
			return;
		}
		if (!isPoneAvailable(vm.mobile)) {
			toast('请输入正确的手机号')
			return;
		}
		get_data('api/login/mobile_login', {
			token: $api.getStorage('token'),
			mobile: vm.mobile,
			authCode: vm.sms_code,
			flag: '1'
		}, function(ret) {
			//alert(JSON.stringify(ret))
			if (ret.status) {
				$api.setStorage('token', ret.data.token)
				save_userinfo_new(ret)
				api.sendEvent({
					name: 'xg_push',
					extra: {
						uid: ret.data.id
					}
				});
				api.sendEvent({
					name: 'logined'
				});
				//open_win('../my', '../my.html', false)
				setTimeout(function() {
					closeToRoot()
				}, 1000)
			} else {
				toast(ret.msg)
			}
		})
	}
</script>

</html>
